<!DOCTYPE html>
<meta charset="utf-8">

<link href="d3.css" rel="stylesheet" type="text/css">

<style>
#test1 {
  margin: 0;
  padding: 0;
  overflow: none;
}
</style>


<body>

<div id="test1">
  <svg></svg>
</div>

<script src="d3.v2.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="nvtooltip.js"></script>
<script src="d3legend.js"></script> 
<script src="d3line.js"></script> 
<script src="d3linewithlegend.js"></script> 
<script>

$(document).ready(function() {
  var margin = {top: 30, right: 10, bottom: 50, left: 60},
      chart = d3LineWithLegend()
                .xAxis.label('Time (ms)')
                .width(width(margin))
                .height(height(margin))
                .yAxis.label('Voltage (v)');


  var svg = d3.select('#test1 svg')
      .datum(generateData());

  svg.transition().duration(500)
      .attr('width', width(margin))
      .attr('height', height(margin))
      .call(chart);


  chart.dispatch.on('showTooltip', function(e) {
  var offset = $('#test1').offset(), // { left: 0, top: 0 }
        left = e.pos[0] + offset.left,
        top = e.pos[1] + offset.top,
        formatter = d3.format(".04f");

    var content = '<p>serviceType:<b>' + e.point[2] + '</b></p>'
				  + '<p>operation:<b>' + e.point[3] + '</b></p>'
				  + '<p>' + e.series.label + ':<b>' + e.point[1] + '</b></p>';


    nvtooltip.show([left, top], content);
  });

  chart.dispatch.on('hideTooltip', function(e) {
    nvtooltip.cleanup();
  });


  $(window).resize(function() {
    var margin = chart.margin();

    chart
      .width(width(margin))
      .height(height(margin));

    d3.select('#test1 svg')
      .attr('width', width(margin))
      .attr('height', height(margin))
      .call(chart);

    });

  function width(margin) {
    var w = $(window).width() - 20;

    return ( (w - margin.left - margin.right - 20) < 0 ) ? margin.left + margin.right + 2 : w;
  }

  function height(margin) {
    var h = $(window).height() - 20;

    return ( h - margin.top - margin.bottom - 20 < 0 ) ? 
              margin.top + margin.bottom + 2 : h;
  }

  	function getDateTime(theDate) {
		return theDate.getMinutes() + ":" + theDate.getSeconds();
	} 

 	
  //data
  function generateData() {
    var sin = [];

	sin.push([10, 120, "GreeterService", "Greet"]);
	sin.push([11, 250, "GreeterService", "Greet"]);
	sin.push([12, 500, "GreeterService", "Greet"]);
	sin.push([13, 200, "GreeterService", "Greet"]);
	sin.push([14, 400, "GreeterService", "Greet"]);
	
	var cos = [];
	cos.push([new Date(1340705409551), 300]);
	cos.push([new Date(1340705509551), 100]);
	
    return [
      {
        data: sin,
        label: "Sine Wave"
      }
    ];
  }

});


</script>
